<template>
	<view>
		<view class="msgList spaceBet"
			v-if="itemInner.type == 'C2C' && itemInner.lastMessage.lastTime > 0"
			@tap="handleRoute(itemInner.conversationID)"
		> 
			<view class="headImg">
				<image class="samePar" :src="setConversationAvatar" @error="handleImageError"></image>
				<view class="unread" v-if="itemInner.unreadCount !== 0">
					<view class="read-text" v-if="itemInner.unreadCount > 99">99+</view>
					<view class="read-text" v-else>{{ itemInner.unreadCount }}</view>
				</view>
			</view>
			<view class="msgCon">
				<view class="tui-conversation-item-name spaceBet">
					<view class="sendUser">{{ conversationName }}咨询师</view>
					<view>{{ timeago }}</view>
				</view>
				<view class="tui-conversation-lastMessage ellip">{{ itemInner.lastMessage.messageForShow }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { caculateTimeago } from '../../subIM/components/base/common.js';
	export default {
		props: {
			itemInner: {
				type: Object,
				default: () => {}
			}
		},
		data(){
			return{
				conversationName:'',
				setConversationAvatar:'',
				timeago:''
			}
		},
		watch: {
			itemInner: {
				handler: function(itemInner) {
					this.setData({
						conversationName: this.getConversationName(itemInner),
						setConversationAvatar: this.setConversationAvatarHandler(itemInner),
						timeago: caculateTimeago(itemInner.lastMessage.lastTime * 1000)
					});
					this.$updateTimeago(itemInner);
				},
				immediate: true,
				deep: true
			}
		},
		methods:{
			handleRoute(id){
				this.$emit('handleRoute',id)
			},
			// 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID
			getConversationName(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					return '系统通知';
				}
			
				if (conversation.type === 'C2C') {
					return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
				}
			
				if (conversation.type === 'GROUP') {
					return conversation.groupProfile.name || conversation.groupProfile.groupID;
				}
			},
			setConversationAvatarHandler(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					return 'https://web.sdk.qcloud.com/component/TUIKit/assets/system.png';
				}
			
				if (conversation.type === 'C2C') {
					return conversation.userProfile.avatar || '/static/images/defHead.png';
				}
			
				if (conversation.type === 'GROUP') {
					return conversation.groupProfile.avatar || '/pages/subIM/static/static/assets/gruopavatar.svg';
				}
			},
			$updateTimeago(conversation) {
				if (conversation.conversationID) {
					// conversation.lastMessage.timeago = caculateTimeago(conversation.lastMessage.lastTime * 1000);
					conversation.lastMessage.messageForShow = conversation.lastMessage.messageForShow.slice(0, 15);
				}
				this.setData({
					conversation
				});
			},
			handleImageError() {
				this.setData({
					setConversationAvatar: '/static/static/assets/gruopavatar.svg'
				});
			}
		}
	}
</script>

<style lang='scss'>
	.msgList{
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #eee;
		background: #fff;
		.msgCon{
			width: 83%;
			.tui-conversation-item-name {
				line-height: 53rpx;
				color: $pss-text-colora;
				font-size: $font-size24;
				.sendUser{
					font-size: 32rpx;
					color: $pss-text-color3;
					font-weight: bold;
				}
			}
			.tui-conversation-lastMessage {
			  line-height: 40rpx;
			  font-size: 28rpx;
			  color: $pss-text-color8;
			  max-width: 98%;
			}
		}
		.headImg{
			position: relative;
			width: 96rpx;
			height: 96rpx;
			border-radius: 14rpx;
			.samePar{
				border-radius: 14rpx;
			}
			/*padding-left: 40rpx;*/
			/*padding-right: 24rpx;*/
			/*padding-bottom: 28rpx;*/
			/*padding-top: 28rpx;*/
			/* overflow: auto; */
			.unread {
			  top: -10rpx;
			  right: 0rpx;
			  position: absolute;
			  padding: 0 10rpx;
			  height: 15px;
			  border-radius: 16rpx;
			  color: #ffffff;
			  background-color: $pss-color-red;
			}
			.read-text {
			  line-height: 15px;
			  font-size: 10px;
			}
		}
	}
</style>